{php include wl_template('common/header');}
<link rel="stylesheet" href="{TG_URL_ARES}components/light/light7.min.css">
<link rel="stylesheet" href="{TG_URL_ARES}components/weui/weui.css">
<!-- <script type='text/javascript' src='{TG_URL_ARES}components/light/light7.min.js' charset='utf-8'></script> -->
<script type="text/javascript" src="{MODULE_URL}app/resource/layer/layer.js" ></script>
<script type='text/javascript' src='{TG_URL_ARES}js/laytpl.js' charset='utf-8'></script>
<title>我的优惠券</title>
<style>
    #footer li:nth-child(2){
        color: #ff5c67;
        opacity: 0.93;
    }
    .voucher-main{overflow:hidden;}
    .voucher-main .list-cash-coupon{padding:10px 0 0 0; list-style:none; margin:10px auto;}
    .voucher-main .list-cash-coupon li{margin:10px 0;}
   /* .voucher-main .list-cash-coupon a{display:block;width:281px;height:109px;margin:auto;background:url('resource/images/voucher.png') no-repeat 0 -9px;-webkit-background-size:575px auto;position:relative;}*/
    .voucher-main .list-cash-coupon a>p{position: absolute;max-width:200px;height:20px;color:#FFF;-webkit-box-sizing:border-box;}
    .voucher-main .list-cash-coupon a>p:nth-of-type(1){left:25px;top:20px;font-size:14px;}
    .voucher-main .list-cash-coupon a>p:nth-of-type(1)>span{font-size:30px;}
    .voucher-main .list-cash-coupon a>p:nth-of-type(2){left: 26px;top: 62px;font-size: 14px;}
    .voucher-main .list-cash-coupon a>p:nth-of-type(2):first-letter{font-size:14px;margin-right:3px;}
    .voucher-main .list-cash-coupon a>p:nth-of-type(3){left: 26px;top: 83px;font-size: 12px;}
    .voucher-main .list-cash-coupon a>p:nth-of-type(4){left: 160px;top: 42px;font-size: 11px;}
    .voucher-main .list-cash-coupon a>p:nth-of-type(5){right: 12px;top:18px;font-size:14px;width:25px; line-height:18px;}
    .voucher-main .list-cash-coupon li:nth-of-type(4n+2) a, .list-cash-coupon li .a2{background-position: 0 -133px;}
    .voucher-main .list-cash-coupon li:nth-of-type(4n+3) a, .list-cash-coupon li .a3{background-position: 0 -256px;}
    .voucher-main .list-cash-coupon li:nth-of-type(4n) a, .list-cash-coupon li .a4{background-position: 0 -378px;}
    .voucher-main .list-cash-coupon li[disabled] a{background-position: 0 -502px;}
    .voucher-main .list-cash-coupon li[disabled] a:after{content: "";-webkit-background-size: 110px auto;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;pointer-events: none;}
    .voucher-main .list-cash-coupon li[disabled="expire"] a:after{background-image: url('resource/images/voucher02.png'); background-repeat: no-repeat; background-position:50px 15px;}
    .voucher-main .list-cash-coupon li[disabled] a>p{color:rgba(255,255,255,0.85)!important;}
    .voucher-main .list-cash-coupon li.used a{background-position-x:right!important;}
    .voucher-main .list-cash-coupon li.used:nth-of-type(4n+1) a>p:nth-of-type(5){color:#ee5375;}
    .voucher-main .list-cash-coupon li.used:nth-of-type(4n+2) a>p:nth-of-type(5){color:#ffa619;}
    .voucher-main .list-cash-coupon li.used:nth-of-type(4n+3) a>p:nth-of-type(5){color:#92c427;}
    .voucher-main .list-cash-coupon li.used:nth-of-type(4n) a>p:nth-of-type(5){color:#2f9abd;}
    .voucher-main .read-coupon .list-cash-coupon a>p:nth-of-type(3){left:210px; top:65px; font-size:10px;}
    .bar .button-link{
        color:#ff5c67;
    }
    .buttons-tab {
        position: fixed;
        top:0;
        width: 100%;
        z-index: 10990;
    }
    #footer{
        z-index: 9999;
    }
    .content{
        top:10px;
        bottom: 50px;
    }
    .buttons-tab .button.active{
        color: #ff5c67;
        border-color: #ff5c67;
    }
    .coupon-item {
        position: relative;
        padding: 20px 20px 10px 20px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .coupon-item .coupon-header {
        position: relative;
        margin-bottom: 20px;
        width: 100%;
        /*height: 100px;*/
    }
    .coupon-item .coupon-header img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    .coupon-item .coupon-header .kq-overdue {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 40px;
        line-height: 40px;
        vertical-align: middle; 
        transform: translateX(-50%) translateY(-50%);
        color: #fff;
        background-color: rgba(0, 0, 0, 0); 
        border: 1px solid red;
        box-shadow: 0 0 5px red inset;
        font-size: 20px;
        text-align: center;
        transform:rotate(9deg);
        -ms-transform:rotate(9deg); /* Internet Explorer */
        -moz-transform:rotate(9deg); /* Firefox */
        -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
        -o-transform:rotate(9deg); /* Opera */
    }
    .coupon-item .coupon-content {
        display: flex;
        flex-flow: column nowrap;
    }
    .coupon-item .coupon-coontent .time-bar {

    }
    .time-bar .time-container span {
        display: inline-block;
        width: 200px;    
    }
    .coupon-item .coupon-content .coupon-btn {
        align-self: flex-end;
        width: 100px;
        height: 30px;
        line-height: 30px;
        box-shadow: 0 0 4px #aaa; 
        background-color: #ff9900;
        vertical-align: middle;
        text-align: center;   
    }
    .coupon-item .coupon-content .done {
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: #aaa;
        box-shadow: 0 0 4px #aaa; 
        background-color: #ccc;
        vertical-align: middle;
        text-align: center;  
    }
    .coupon-item .coupon-content .coupon-btn a{
        width: 100%;
        height: 100%;
        line-height: 100%;
        color: #fff;
        font-weight: 700; 
    }
    .coupon-item .coupon-content .done a {
        width: 100%;
        height: 100%;
        line-height: 100%;
        color: #aaa;
        font-weight: 700; 
    }
    .coupon-item .coupon-desc {
        margin-bottom: 20px; 
        padding-top: 10px;
        /*white-space: nowrap;*/
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        color: #bbb;
        border-top: 1px solid #ccc;  
    }
    /*ight7捣乱*/
    .coupon-item .coupon-desc p {
        margin: 0;
    }
    .coupon-item .coupon-desc:last-child{
        margin-bottom: 0;
    }
    
    .content .havekq {
        display: none;
        overflow: scroll;
        position: fixed;
        top: 40px;
        left: 0;
        width: 100%;
        height: 83%;
        background-color: #fff;
    }
    .content .overdue {
        display: none;
        overflow: scroll;
        position: fixed;
        top: 40px;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    .iconal-homefill:before,.iconal-dingdan1:before,.iconal-gerenzhongxin:before{
        height: 28px;
    }
</style>
<!-- 未填写个人信息弹窗 -->
<div class="noIdMessage">
    <div>
        <p>请去完善个人信息</p>
        <div class="btn-box">
            <span onclick="location.href='{php echo app_url('order/personnelList');}from=user'" class="yes">好</span>
        </div>
        <!--<i class="iconal-roundclosefill"></i>-->
    </div>
</div>
<div id="footer">{php include wl_template('common/footer');}</div>
<div class="buttons-tab">
    <a href="javascript:;" class="tab-link button active" onclick="showtab1(this);">活动券</a>
    <a href="javascript:;" class="tab-link button" onclick="showtab2(this)">我的活动券</a>
    <a href="javascript:;" class="tab-link button" onclick="showtab3(this)">已过期</a>
    <a href="javascript:;" class="tab-link button" onclick="showtab4(this)">已使用</a>
</div>
<div class="page-group">
    <div class="page page-current" id="page-coupon-list">
        <!--<header class="bar bar-nav">-->
            <!--<a class="button button-link button-nav pull-left back" href="{php echo app_url('member/home')}">-->
                <!--<span class="icon icon-left"></span>返回-->
            <!--</a>-->
            <!--<h1 class="title">我的优惠券</h1>-->
        <!--</header>-->
        <div class="content native-scroll">

            <div class="tabs">
                <div id="tab1" class="tab active">
                </div>
                <div id="tab2" class="tab">
                </div>
                <div id="tab3" class="tab">
                </div>
            </div>
    			<div class="voucher-main">
                        <ul class="list-cash-coupon">
                                <li disabled>
                                    <!-- <a href="javascript:;" style="margin-bottom:20px;background-position:0 -10px;">
                                        <p><span>12</span>元</p>
                                        <p>★订单满6}元可使用</p>
                                        <p>有效期至2017-6-6</p>
                                        <p>已使用6张</p>
                                        <p>已经使用</p>
                                    </a>
                                    <a href="javascript:;" style="margin-bottom:20px;background-position:0 -133px;">
                                        <p><span>12</span>元</p>
                                        <p>★订单满6}元可使用</p>
                                        <p>有效期至2017-6-6</p>
                                        <p>已使用6张</p>
                                        <p>已经使用</p>
                                    </a>

                                    <a href="javascript:;"  style="margin-bottom:20px;background-position:0 -256px;">
                                        <p><span>12</span>元</p>
                                        <p>★订单满6}元可使用</p>
                                        <p>有效期至2017-6-6</p>
                                        <p>已使用6张</p>
                                        <p>已经使用</p>
                                    </a>

                                    <a href="javascript:;"  style="margin-bottom:20px;background-position:0 -379px;">
                                        <p><span>12</span>元</p>
                                        <p>★订单满6}元可使用</p>
                                        <p>有效期至2017-6-6</p>
                                        <p>已使用6张</p>
                                        <p>已经使用</p>
                                    </a>

                                    <a href="javascript:;"  style="margin-bottom:20px;background-position:0 -500px;">
                                        <p><span>12</span>元</p>
                                        <p>★订单满6}元可使用</p>
                                        <p>有效期至2017-6-6</p>
                                        <p>已使用6张</p>
                                        <p>已经使用</p>
                                    </a> -->
                                    <div class="coupon-item">
                                        <!-- <div class="coupon-header">
                                        </div>
                                        <div class="coupon-content">
                                            <div class="time-bar">
                                                <div class="time-title">时间:</div>
                                                <div class="time-container">
                                                    <span>9.3（周六）09：00--15：30</span>
                                                    <span>9.3（周六）09：00--15：30</span>
                                                </div>
                                            </div>
                                            <div class="coupon-btn">
                                                <a href="{php echo app_url('goods/detailkq')}">免费领券</a>
                                            </div>
                                        </div>
                                        <div class="coupon-desc">
                                            蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的..
                                        </div> -->
                                    </div>
                            </li>

                    </ul>
                </div>
            <div class="havekq">
                <div class="coupon-item">
                    <!-- <div class="coupon-header">
                    </div>
                    <div class="coupon-content">
                        <div class="time-bar">
                            <div class="time-title">时间:</div>
                            <div class="time-container">
                                <span>9.3（周六）09：00--15：30</span>
                                <span>9.3（周六）09：00--15：30</span>
                            </div>
                        </div>
                        <div class="coupon-btn">
                            <a href="{php echo app_url('goods/detailkq')}">免费领券</a>
                        </div>
                    </div>
                    <div class="coupon-desc">
                        蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的..
                    </div> -->
                </div>
            </div>

            <div class="overdue">
                <div class="coupon-item">
                    <!-- <div class="coupon-header">
                    </div>
                    <div class="coupon-content">
                        <div class="time-bar">
                            <div class="time-title">时间:</div>
                            <div class="time-container">
                                <span>9.3（周六）09：00--15：30</span>
                                <span>9.3（周六）09：00--15：30</span>
                            </div>
                        </div>
                        <div class="coupon-btn">
                            <a href="{php echo app_url('goods/detailkq')}">免费领券</a>
                        </div>
                    </div>
                    <div class="coupon-desc">
                        蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的..
                    </div> -->
                </div>
            </div>
            <div class="used">
                <div class="coupon-item" style="margin-top: 20px">
                    <!-- <div class="coupon-header">
                    </div>
                    <div class="coupon-content">
                        <div class="time-bar">
                            <div class="time-title">时间:</div>
                            <div class="time-container">
                                <span>9.3（周六）09：00--15：30</span>
                                <span>9.3（周六）09：00--15：30</span>
                            </div>
                        </div>
                        <div class="coupon-btn">
                            <a href="{php echo app_url('goods/detailkq')}">免费领券</a>
                        </div>
                    </div>
                    <div class="coupon-desc">
                        蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的水彩画教授，蔡谟老师是中国美院很有名的..
                    </div> -->
                </div>
            </div>
        </div>
    </div>

</div>
<script>
    $(function () {
        'use strict'; 
        showtab1(); 
    });

    // 获取卡券列表
    function getkqlist() {
        $.get(member_coupon_view,function (res) {
            var data = JSON.parse(res);
            if(data.status === 1) {
                var coupon = data.coupon;
                console.log(coupon);
                var html = ''; 
                for(var i = 0;i < coupon.length;i++ ) {
                    var start_time = formatDate(coupon[i].start_time);
                    var end_time = formatDate(coupon[i].end_time);
                    var course = escapeHtml(coupon[i].course);
                    if(coupon[i].enable == '1'){
                        var enable = '<div class="coupon-btn"><a href="{php echo app_url('goods/detailkq')}id='+coupon[i].id+'">卡券详情</a></div>'
                    }else{
                        var enable = '<div class="coupon-btn"><a href="{php echo app_url('goods/detailkq')}id='+coupon[i].id+'">免费领券</a></div>'
                    }
                    html += '<div onclick="location.href='+"'"+'{php echo app_url('goods/detailkq')}id='+coupon[i].id+"'"+'"><div class="coupon-header"><img src='+coupon[i].pic+'></div>'+
                            '<div class="coupon-content">'+
                            '<div class="time-bar"><div class="time-title"></div>'+
                            '<div class=""><span>时间: '+start_time+' - </span><span>'+end_time+'</span></div></div>'+enable+'</div>'+
                            '<div class="coupon-desc">'+course+'</div></div>'
                }
                if(html !== ''){
                    $('.coupon-item').html(html);
                }else{
                    $('.coupon-item').html('<h3 class="notqk" style="text-align:center">暂无卡券</h3>')
                } 
            }
        })
    }

    function formatDate (ns) {   //转换时间戳
        var ns = new Date(parseInt(ns) * 1000);
       var Year  = ns.getFullYear();
       var Month = ns.getMonth()+1;
       var DateDay = ns.getDate();
       var Hour = ns.getHours();
       var Minute = ns.getMinutes().toString().length == 1? '0'+ns.getMinutes() : ns.getMinutes();
       return Year+'/'+Month+'/'+DateDay+' '+Hour+':'+Minute; 
    }
    // 显示我活动券
    function showtab2(that) {
        $('.overdue').hide();
        $('.voucher-main').hide();
        $('.used').hide();
        $('.havekq').fadeIn();
        $(that).parent().find('a').removeClass('active'); 
        $(that).addClass('active');
        $.get(member_coupon_view,function (res) {
            var data = JSON.parse(res);
            if(data.status === 1) {
                var coupon = data.coupon;
                var html = ''; 
                for(var i = 0;i < coupon.length;i++ ) {
                    var start_time = formatDate(coupon[i].start_time);
                    var end_time = formatDate(coupon[i].end_time);
                    if(coupon[i].enable == '1') {
                        var enable = '<div class="coupon-btn"><a href="{php echo app_url('goods/detailkq')}id='+coupon[i].id+'">卡券详情</a></div>'
                        html += '<div onclick="location.href='+"'"+'{php echo app_url('goods/detailkq')}id='+coupon[i].id+"'"+'"><div class="coupon-header"><img src='+coupon[i].pic+'></div>'+
                                '<div class="coupon-content">'+
                                '<div class="time-bar"><div class="time-title"></div>'+
                                '<div class=""><span>时间: '+start_time+' - </span><span>'+end_time+'</span></div></div>'+enable+'</div>'+
                                '<div class="coupon-desc">'+escapeHtml(coupon[i].course)+'</div></div>'
                    }
                }
                if(html !== ''){
                    $('.coupon-item').html(html);
                }else{
                    $('.coupon-item').html('<h3 class="notqk" style="text-align:center">暂无卡券</h3>')
                } 
            }
        })
    }
    // 显示活动券
    function showtab1(that) {
        $('.overdue').hide();
        $('.havekq').hide();
        $('.used').hide();
        $('.voucher-main').fadeIn();
        $(that).parent().find('a').removeClass('active'); 
        $(that).addClass('active');
        $.get(member_coupon_view,function (res) {
            var data = JSON.parse(res);
            if(data.status === 1) {
                var coupon = data.coupon;
                var html = ''; 
                for(var i = 0;i < coupon.length;i++ ) {
                    var start_time = formatDate(coupon[i].start_time);
                    var end_time = formatDate(coupon[i].end_time);
                    if(coupon[i].enable == '1'){
                        var enable = '<div class="coupon-btn"><a href="{php echo app_url('goods/detailkq')}id='+coupon[i].id+'">卡券详情</a></div>'
                    }else{
                        var enable = '<div class="coupon-btn"><a href="{php echo app_url('goods/detailkq')}id='+coupon[i].id+'">免费领券</a></div>'
                    }
                    html += '<div onclick="location.href='+"'"+'{php echo app_url('goods/detailkq')}id='+coupon[i].id+"'"+'"><div class="coupon-header"><img src='+coupon[i].pic+'></div>'+
                            '<div class="coupon-content">'+
                            '<div class="time-bar"><div class="time-title"></div>'+
                            '<div class=""><span>时间: '+start_time+' - </span><span>'+end_time+'</span></div></div>'+enable+'</div>'+
                            '<div class="coupon-desc">'+escapeHtml(coupon[i].course)+'</div></div>'
                }
                if(html !== ''){
                    $('.coupon-item').html(html);
                }else{
                    $('.coupon-item').html('<h3 class="notqk" style="text-align:center">暂无卡券</h3>')
                } 
            }
        })
    }

    //显示过期卡券
    function showtab3(that) {
        var nowDate = Date.parse(new Date()) / 1000;
        $('.havekq').hide();
        $('.voucher-main').hide();
        $('.used').hide();
        $('.overdue').fadeIn();
        $(that).parent().find('a').removeClass('active'); 
        $(that).addClass('active');
        $.get(member_coupon_view,function (res) {
            var data = JSON.parse(res);
            if(data.status === 1) {
                var coupon = data.coupon;
                var html = ''; 
                for(var i = 0;i < coupon.length;i++ ) {
                    var start_time = formatDate(coupon[i].start_time);
                    var end_time = formatDate(coupon[i].end_time);
                    if(nowDate > Number(coupon[i].end_time) && coupon[i].enable == '1'&&coupon[i].expire == '0'){
                        var enable = '<div class="coupon-btn done"><a>已领券</a></div>' 
                        html += '<div class="coupon-header"><img src='+coupon[i].pic+'><div class="kq-overdue">卡券过期</div></div>'+
                                '<div class="coupon-content">'+ 
                                '<div class="time-bar"><div class="time-title"></div>'+
                                '<div class=""><span> 时间:'+start_time+' - </span><span>'+end_time+'</span></div></div>'+enable+'</div>'+
                                '<div class="coupon-desc">'+escapeHtml(coupon[i].course)+'</div>'
                    }
                }
                if(html !== ''){
                    $('.coupon-item').html(html); 
                }else{
                    $('.coupon-item').html('<h3 class="notqk" style="text-align:center">暂无卡券</h3>')
                } 
            }
        })
    }

    //显示已使用卡券
      function showtab4(that) {      
        $('.overdue').hide();
        $('.havekq').hide();
        $('.voucher-main').hide();
        $('.used').fadeIn();
        $(that).parent().find('a').removeClass('active'); 
        $(that).addClass('active');
        $.get(member_coupon_view,function (res) {
            var data = JSON.parse(res);
            if(data.status === 1) {
                var coupon = data.coupon;
                var html = ''; 
                for(var i = 0;i < coupon.length;i++ ) {
                    var start_time = formatDate(coupon[i].start_time);
                    var end_time = formatDate(coupon[i].end_time);
                    if(Number(coupon[i].expire) > 0 ){
                    var enable = '<div class="coupon-btn"><a href="{php echo app_url('goods/detailkq')}id='+coupon[i].id+'">卡券详情</a></div>'
                    html += '<div onclick="location.href='+"'"+'{php echo app_url('goods/detailkq')}id='+coupon[i].id+"'"+'"><div class="coupon-header"><img src='+coupon[i].pic+'></div>'+
                            '<div class="coupon-content">'+
                            '<div class="time-bar"><div class="time-title"></div>'+
                            '<div class=""><span>时间: '+start_time+' - </span><span>'+end_time+'</span></div></div>'+enable+'</div>'+
                            '<div class="coupon-desc">'+escapeHtml(coupon[i].course)+'</div></div>'
                    }
                }
                if(html !== ''){
                    $('.coupon-item').html(html);
                }else{
                    $('.coupon-item').html('<h3 class="notqk" style="text-align:center">暂无卡券</h3>')
                } 
            }
        })
    }

    function escapeHtml(text) {
    var a=text.replace(/(\&lt;)/g,"<");
    var b=a.replace(/(\&gt;)/g,">");
    var c=b.replace(/(\&amp;)/g,"\&");
    var d=c.replace(/(\&quot;)/g,"\"");
    return d;
}
    window.onload=function(){
        $('#footer').on('click','li',function(){
            if($(this).hasClass('gouwuche')){
                ajaxCarList();
                $('#cartDetails').slideDown();
            }else if($(this).hasClass('jishi')) {
                //跳转我的技师 解决local获取不到
                var local=JSON.parse(sessionStorage.getItem('location'))||{latitude:'',longitude:''};
                location.href=personnelUrl+'localLat='+local.latitude+'&localLon='+local.longitude;
            }else{
                location.href = $(this).data('href');
            }
        });
    }
</script>
